<template>
  <div class="industry">
    <ul>
      <li v-for="data in data" style="padding-left: 20px">
        <div v-if="data.value =='期刊'" class="periodical">
          <router-link :to="{path:'journalDetails',query:{id:data.id}}">
            <Row :gutter="16">
              <i-col span="4">
                <div class="img">
                  <img :src="data.photo" alt="" style="width: 150px;height: 200px;">
                  <div class="ul">
                    <ul>
                      <li><img src="../../assets/img/u653.png" alt=""></li>
                      <li><img src="../../assets/img/u654.png" alt=""></li>
                      <li><img src="../../assets/img/u692.png" alt=""></li>
                    </ul>
                  </div>
                </div>
              </i-col>
              <i-col span="20">
                <div class="details">
                  <p class="p1">{{data.cname}}</p>
                  <p class="p2"><span style="display:inline-block;width: 81px">主办单位：</span>{{data.sponsor}}</p>
                  <p class="p2"><span style="display:inline-block;width: 81px">期刊周期：</span>{{data.publicationCycle}}</p>
                  <p class="p2"><span style="display:inline-block;width: 81px">国内刊号：</span>{{data.CN}}</p>
                  <Row class="p2">
                    <i-col span="2">
                      <span style="width: 80px">期刊简介：</span>
                    </i-col>
                    <i-col span="22">
                      <span class="synopsis">{{data.intro}}</span>
                    </i-col>
                  </Row>
                </div>
              </i-col>
            </Row>
          </router-link>
        </div>
        <div v-if="data.value =='论文'" class="paper">
          <a class="a" href="">1.{{data.cTitle}}</a>
          <p style="padding: 3px 0">[期刊论文] <span class="spn1">{{data.cname}}</span> - <span class="spn1">{{data.deliveryTime}}</span>
          </p>
          <p style="padding: 3px 0">摘要：<span class="spn1">{{data.eabstract}}</span></p>
          <p style="padding: 3px 0">关键词：<span class="spn1">{{data.ckeys}}</span></p>
        </div>
        <div v-if="data.value =='作者'" class="paper">
          <a class="a" href="">1.{{data.ctitle}}</a>
          <p style="padding: 3px 0">[期刊论文] <span class="spn1">{{data.cname}}</span> - <span class="spn1">{{data.deliveryTime}}</span>
          </p>
          <p style="padding: 3px 0">摘要：<span class="spn1">{{data.eabstract}}</span></p>
          <p style="padding: 3px 0">关键词：<span class="spn1">{{data.ckeys}}</span></p>
        </div>
        <div class="activity" v-if="data.value =='活动'">
          <Row :gutter="16">
            <i-col span="6">
              <div class="industry">
                <router-link class="a" to="">
                  <img :src="data.phoneUri" alt="">
                </router-link>
              </div>
            </i-col>
            <i-col span="18">
              <div class="particulars">
                <h2>
                  <router-link to="" class="a">{{data.title}}</router-link>
                </h2>
                <p class="p1">{{data.newsIntro}}</p>
                <p class="p2">{{data.create_time}}</p>
              </div>
            </i-col>
          </Row>
        </div>
      </li>
    </ul>
    <!--Vue组件-->
    <div class="page">
      <paging :all="all" @returnValue="returnValue"></paging>
    </div>
  </div>
</template>

<script>
  import bus from '../bus';
  import paging from '../module/paging'
    export default {
      components: {
        paging
      },
      data() {
        return {
          /*分页*/
          all: 1,
          cur: 1,
          data:[],
        }
      },
      created() {
        bus.$on('data', msg => {
          this.data = msg.lists;
          this.all = msg.totalPage;
        })
      },
      methods: {
        returnValue(data) {
          this.cur = data;
          bus.$emit('cur', this.cur);
        },
      }
    }
</script>

<style scoped>
  a {
    color: #000;
  }
  .industry {
    padding: 20px 0;
    min-height: 180px;
  }
  .industry > ul {
    padding-left: 10px;
    list-style: none
  }
  .industry > ul > li {
    padding: 6px 0;
  }
  .industry > ul > li > a {
    font-weight: 400;
    color: #666666;
    font-size: 14px;
  }
  .industry > ul > li > a:hover {
    color: #2b369f;
  }

  /*期刊*/
  .periodical {
    margin: 8px 0;
    border: 1px solid #ccc;
  }

  .img {
    padding: 10px;
  }

  .img .ul ul {
    list-style: none;
    white-space: nowrap;
    float: left;
    padding-top: 10px;
  }

  .img .ul ul li {
    width: 35px;
    display: inline-block;
    white-space: nowrap;
  }

  .img .ul ul li > img {
    width: 100%;
    height: 100%;
  }

  .details {
    padding: 10px;
  }

  .details .p2 {
    padding: 2px 0;
    font-size: 15px;
  }

  .synopsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /*论文*/
  .paper .a {
    display: inline-block;
    font-size: 18px;
    padding: 5px 0;
    color: #2b369f;
    font-weight: bold;
  }

  .spn1 {
    padding: 0 5px;
  }

  /*活动 */
  .activity {
    padding-bottom: 20px;
  }

  .activity .industry .a > img {
    width: 100%;
  }

  .particulars {
    padding-top: 30px;
  }

  .particulars .a {
    color: #000;
  }

  .particulars .p1 {
    padding: 10px 0;
    font-size: 15px;
  }

  .particulars .p2 {
    font-size: 15px;
  }
</style>
